<template>
  <div>
    <h1 v-bgred>
      <span>自定义指令</span>
    </h1>
    <hr>
    <p v-bgred v-bold>show</p>
  </div>
</template>

<script>
/* 
  有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令
*/
export default {
name:'App',
directives:{
  bgred(ele){
    /* 
        自定义指令基础用法中,第一个参数拿到的当前DOM元素
        
      */
     ele.style.background='red'
  }
}
}
</script>

<style>

</style>